<script>
    export default {
        props: {
            tableConfig: {
                type: Array,
                default: () => []
            },
            tableData: {
                type: Array,
                default: () => []
            },
        },
        methods: {
            getColumn(item) {
                const scopedSlots = {};
                const children = [];

                if (item.scopedSlots) {
                    Object.assign(scopedSlots, item.scopedSlots);
                }

                if (item.render) {
                    Object.assign(scopedSlots, {
                        default: item.render,
                    });
                }
                return {
                    props: { ...item },
                    scopedSlots,
                    children,
                };
            },
            renderSingleColumn(item, index) {
                const { props, scopedSlots } = this.getColumn(item);
                const attrs = {
                    props: {
                        align: "center",
                        key: `${props.label}+${index}`,
                        ...props,
                        formatter(row, column, cellValue) {
                            return cellValue === null || cellValue === '' || cellValue === undefined ? '--' : cellValue;
                        },
                    },
                    scopedSlots,
                };

                if (Array.isArray(item.children) && item.children.length) {
                    return <el-table-column {...attrs}>{this.renderColumn(item.children)}</el-table-column>;
                }

                return <el-table-column {...attrs}></el-table-column>;
            },
            renderColumn(columns) {
                return (Array.isArray(columns) ? columns : []).map(this.renderSingleColumn);
            },
        },
        render() {
            const attrs = {
                border: true,
                stripe: true,
                headerCellStyle: { background: '#f3f6f9' },
                cellStyle: { borderRight: 'none' },
                data: this.tableData,
                ...this.$attrs,
            };
            const on = {
                ...this.$listeners,
            };
            const scopedSlots = {
                empty: () => <span class='text-danger'>没有查询到相关数据</span>,
                ...this.$scopedSlots,
            };
            return (
                <div>
                    <el-table props={attrs} on={on} scopedSlots={scopedSlots}>
                        {this.renderColumn(this.tableConfig)}
                    </el-table>
                </div>
            );
        },
    };
</script>

<style lang="scss"></style>
